<template>
  <div class="cont" ref="fullscreenContainer">
    <Myhead title="人员管理" />
    <div class="w">
      <div class="left" @click="handleJump">
        <div class="number">
          <div class="num">
            <span>到场人数</span>
            <span class="numnunm">{{ this.daochangrenshu }}</span>
          </div>
          <div class="num">
            <span>未到场人数</span>
            <span class="numnunm">{{ this.nodaochangrenshu }}</span>
          </div>
        </div>
        <vue-seamless-scroll
          :data="Listporp"
          class="seamless-warp"
          :class-option="classOption"
        >
          <div class="history">
            <div class="list" v-for="(item, index) in Listporp" :key="index">
              <span
                >{{ item.name }}
                <span
                  style="color: #00be3f"
                  v-if="item.content === '上班打卡'"
                  >{{ item.content }}</span
                >
                <span
                  style="color: #da4d4c"
                  v-else-if="item.content === '下班打卡'"
                  >{{ item.content }}</span
                >
                <span
                  style="color: #da4d4c"
                  v-else-if="item.content === '迟到打卡'"
                  >{{ item.content }}</span
                >
                <span v-else>{{ item.content }}</span>
              </span>
              <span>{{ item.time }}</span>
            </div>
          </div>
        </vue-seamless-scroll>
      </div>

      <div class="right">
        <vue-seamless-scroll
          :data="teamList"
          class="seamless-warp3"
          :class-option="classOption3"
        >
          <div :class="index == 4 ? 'team2' : 'team'" v-for="(item, index) in teamList" :key="index">
            <div class="team_head">
              <span><img src="../../assets/images/sanjiao.png" alt="" /></span>
              <span
                style="
                  font-size: 0.1875rem;
                  line-height: 0.2188rem;
                  margin-left: 0.0885rem;
                "
                >{{ item.team }}</span
              >
              <span
                style="
                  font-size: 0.1875rem;
                  line-height: 0.2188rem;
                  position: absolute;
                  right: 0.2083rem;
                "
                >部门人数:{{ item.num }}</span
              >
            </div>
            <!-- <vue-seamless-scroll
            :data="PeopleList"
            class="seamless-warp2"
            :class-option="classOption2"
         
          > -->
            <div class="team_people">
              <div v-for="(item2, index2) in PeopleList[index]" :key="index2">
                <span
                  v-if="item2.status == 1"
                  style="background-color: #2da55d"
                  :id="item2.dw_employee_no"
                  >{{ item2.name }}</span
                >
                <span v-else :id="item2.dw_employee_no">{{ item2.name }}</span>
              </div>
            </div>
            <!-- </vue-seamless-scroll> -->
          </div>
        </vue-seamless-scroll>
      </div>
      <audio
        controls="controls"
        hidden
        src="../../assets/images/warning.mp3"
        ref="audio"
      ></audio>
    </div>
    <Myfoot />
  </div>
</template>

<script>
import Myhead from "./components/my-head.vue";
import Myfoot from "./components/my-foot.vue";
import { getUserInfo, getTeamUser } from "@/api";
export default {
  data() {
    return {
      daochangrenshu: "0",
      nodaochangrenshu: "0",
      Listporp: [
        {
          name: "易鹏飞",
          time: "15:10:16",
          code: 1,
        },
        {
          name: "李阳",
          time: "15:10:16",
          code: 3,
        },
        {
          name: "申倩辉",
          time: "15:10:16",
          code: 2,
        },
        {
          name: "刘源隆",
          time: "15:10:16",
          code: 1,
        },
        {
          name: "张青雅",
          time: "15:10:16",
          code: 3,
        },
        {
          name: "姚思聪",
          time: "15:10:16",
          code: 2,
        },
      ],
      PeopleList: [],
      teamList: [],
      team2: [],
      okok: null,
    };
  },
  methods: {
    getUserHistory() {
      getUserInfo().then((res) => {
        console.log(res);
        this.Listporp = res.data.data;
      });
    },
    getTeam() {
      getTeamUser().then((res) => {
        console.log(res.data.message);
        var msg = JSON.parse(res.data.message)
        this.daochangrenshu = msg.work
        this.nodaochangrenshu = msg.notWork
        this.PeopleList = [];
        this.teamList = res.data.data;
        res.data.data.forEach((element) => {
          this.PeopleList.push(element.name);
        });
        console.log(this.PeopleList);
      });
    },
    handleJump() {
      console.log("11111");
      // this.$router.push('/notice')
      // this.getTeam();
    },
    initWs1() {
      this.ws = new WebSocket("ws://192.168.110.46:8010/websocketHK");
      this.ws.onopen = () => {
        console.log("socket 已连接1111");
      };

      this.ws.onmessage = ({ data }) => {
        console.log("接收到的数据--》", data);
        var str = JSON.parse(data);
        console.log(str);
        this.daochangrenshu = str.work;
        this.nodaochangrenshu = str.notWork;
        if (str.userStatus.no === 0) {
          console.log("假的！！！！");
        } else {
          console.log("进出大门了！！！！");
          this.getTeam();
        }
        this.getUserHistory();
      };
      this.ws.onerror = (e) => {
        console.log("发生错误", e);
      };
      this.ws.onclose = () => {
        console.log("socket closed");
      };
    },


    redirectToPage() {
    // 使用setTimeout()函数设置定时器，参数1表示要等待的时间（单位为毫秒），参数2表示要执行的函数或者代码片段
    var peopletime = setTimeout(() => {
      // 这里写入需要执行的跳转逻辑，比如路由导航到其他页面
      this.$router.push('/notice')
    }, 30000); // 3000ms = 3s，表示等待3秒后再执行跳转操作
  }

  },
  components: {
    Myhead,
    Myfoot,
  },

  mounted() {

    this.initWs1();
    this.getUserHistory();
    this.getTeam();
    //this.redirectToPage()
  },
  computed: {
    classOption() {
      return {
        step: 2, // 数值越大速度滚动越快
        limitMoveNum: this.Listporp.length, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
    classOption2() {
      return {
        step: 1, // 数值越大速度滚动越快
        limitMoveNum: this.PeopleList.length, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
    classOption3() {
      return {
        step: 2, // 数值越大速度滚动越快
        limitMoveNum: this.teamList.length, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.w {
  display: flex;
  width: 9.8333rem;
  margin: 0 auto;
  justify-content: space-between;
}
.left {
  width: 3.8021rem;
  height: 80vh;
  margin-top: 0.1823rem;
  border-radius: 0.0208rem;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(0.1615rem);
  box-shadow: 0px 0.0521rem 0.0781rem 0px rgba(3, 30, 62, 0.3);
}
.right {
  width: 5.9479rem;
  height: 80vh;
  overflow: auto;
  margin-top: 0.1823rem;
  border-radius: 0.0208rem;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(0.1615rem);
  box-shadow: 0px 0.0521rem 0.0781rem 0px rgba(3, 30, 62, 0.3);
}
.seamless-warp3 {
  width: 5.9479rem;
  height: 100%;
  //  margin-top: 0.1094rem;
  overflow: hidden;
}
.number {
  display: flex;
}
.num {
  width: 50%;
  display: flex;
  flex-direction: column;
  font-size: 0.1875rem;
  align-items: center;
  margin-top: 0.2448rem;
}
.numnunm {
  width: 0.8854rem;
  height: 0.5781rem;
  text-align: center;
  line-height: normal;
  margin-top: 0.0573rem;
  font-size: 0.4911rem;
}
.history {
  width: 3.6302rem;
  // height: 55vh;
  // background: rgba(0, 0, 0, 0.45);
  margin: 0 auto;
  margin-top: 0.1094rem;
  // overflow: hidden;
}
.list {
  display: flex;
  width: 3.6302rem;
  height: 0.4688rem;
  border-radius: 0.0417rem;
  opacity: 1;
  align-self: stretch;
  justify-content: space-between;
  padding: 0 0.125rem;
  align-items: center;
  font-size: 0.1875rem;
  background: #12192c;
  margin-top: 0.0417rem;
}
.seamless-warp {
  width: 100%;
  height: 55vh;
  margin-top: 0.1094rem;
  overflow: hidden;
}
.seamless-warp2 {
  width: 100%;
  height: 70%;
  margin-top: 0.1094rem;
  overflow: hidden;
}

.team {
  width: 5.7604rem;
  height: 1.3229rem;
  border-radius: 0.0208rem;
  margin: 0 auto;
  margin-top: 0.1302rem;
  background: rgba(8, 14, 27, 0.5);
}
.team2{
  width: 5.7604rem;
  height: 2.8646rem;
  border-radius: 0.0208rem;
  margin: 0 auto;
  margin-top: 0.1302rem;
  background: rgba(8, 14, 27, 0.5);
}
.team_head {
  display: flex;
  padding-top: 0.0521rem;
  height: 0.2188rem;
  align-items: center;
  justify-items: center;
}
.team_people {
  margin-top: 0.1198rem;
  height: 70%;
  overflow: hidden;
  display: flex;
  // justify-content: space-between;
  flex-wrap: wrap;
  span {
    margin: 0.026rem 0.0833rem;
    display: flex;
    font-size: 0.2069rem;
    width: 0.776rem;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    height: 0.3385rem;
    border-radius: 0.0517rem;
    background: #252c46;
  }
}
</style>
